<template>
        <h4>动态组件：</h4>
        <section>
            <span class="tab" v-for="item in tabs" :key="item" @click="changeCom(item)">{{item.name}}</span>
        </section>
        <component :is="currentComp.comp"></component>
</template>
    
<script setup lang='ts'>
import A from '../components/A.vue'
import B from '../components/B.vue'
import { reactive, shallowRef } from "@vue/reactivity";
import { markRaw, ref } from 'vue';
type Tab = {
    name: string,
    comp: any
}
let tabs = reactive<Tab[]>([{
    name: 'tabA',
    comp: markRaw(A)
}, {
    name: 'tabB',
    comp: markRaw(B)
}
]);

type Com = Pick<Tab, 'comp'>;
let currentComp = reactive<Com>({
    comp: tabs[0].comp
});
let changeCom = (item: any) => {
    currentComp.comp = item.comp;
    console.log('changeCom', currentComp);
};
</script>
    
<style>
    .tab {
        width: 60px;
        height: 40px;
        background-color: red;
        margin: 20px;
    }
</style>